<!--
- Author:  LiShibin.
- Date:    2017/11/28 0028.
- File:    和百科相关的商品列表.
-->
<template>
  <div class="Web_Box">
    <div class="CommodityClassification">
      <div class="con"
        v-infinite-scroll="loadMoreGoods"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <ul id="content">
          <li v-for="item in goods.data" @click="gotoGoodsDetail(item.store_id, item.goods_commonid)">
            <div class="pic"><img :src="$config.imgsite + $config.goodsImgSrc + item.store_id + '/' + item.goods_image + '_w200'" alt=""/>
            </div>
            <h3 class="slh2" style="-webkit-line-clamp: 1">{{item.goods_name}}</h3>
            <p class="slh2" style="-webkit-line-clamp: 1; padding: 0.2rem">{{item.store_name}}</p>
            <p class="Price">￥{{item.goods_price}}</p>
          </li>
        </ul>
      </div>
      <loading-more :allLoaded="goods.allLoaded" :show="goods.data.length > 0"></loading-more>
      <empty-data :show="goods.allLoaded && goods.data.length <= 0" text="该植物暂未上架"></empty-data>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        wikiId: this.$route.query.wiki,
        buyType: this.$route.query.buyType,
        goods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getGoodsByWiki(this.goods.page, this.goods.pageSize)
    },
    methods: {
      gotoGoodsDetail(storeId, goods_id) {
        this.$router.push({
          name: 'goods-detail',
          params: {id: goods_id},
          query: {storeId: storeId, buyType: this.buyType}
        })
      },
      getGoodsByWiki(page, pageSize) {
        this.goods.loading = true
        this.$request.getGoodsByWiki({
          city_id: this.$storage.getLocation.code,
          m_id: this.wikiId,
          page: page,
          pageSize: pageSize,
          type: this.buyType
        }).then(data => {
          if (data.length < this.goods.pageSize) {
            this.goods.allLoaded = true
          }
          this.goods.data = [...this.goods.data, ...data]
        }).finally(() => {
          this.goods.requested = true
          this.goods.loading = false
        })
      },
      loadMoreGoods() {
        if (this.goods.loading || this.goods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsByWiki(++this.goods.page, this.goods.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>